<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模拟时钟</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body class="flexC">
    <div class="clock flexC radius">
      <!-- 时钟的表盘 -->
      <div class="pan radius">
        <!-- 时钟的刻度 -->
        <div class="clocks">
          <!-- 其实只显示12、3、6、9其他我懒得算了-->
          <div class="clock-item show"></div>
          <div class="clock-item">1</div>
          <div class="clock-item">2</div>
          <div class="clock-item show"></div>
          <div class="clock-item">4</div>
          <div class="clock-item">5</div>
          <div class="clock-item show"></div>
          <div class="clock-item">7</div>
          <div class="clock-item">8</div>
          <div class="clock-item show"></div>
          <div class="clock-item">10</div>
          <div class="clock-item">11</div>
        </div>
        <!-- 时钟的针 -->
        <div class="sec long"></div>
        <div class="min long"></div>
        <div class="hour long"></div>
        <!-- 中间来个点 -->
        <div class="point radius"></div>
      </div>
    </div>
    <!-- 现在的时间 -->
    <!--     <div class="time-bar">
      <p class="now-time"></p>
    </div> -->
    <script>
      //获取下dom元素
      const clock_sec = document.querySelector(".sec");
      const clock_min = document.querySelector(".min");
      const clock_hour = document.querySelector(".hour");
      const time = document.querySelector(".now-time");

      function changeDomRotate(dom, deg) {
        dom.style.transform = `rotate(${deg}deg)`;
      }
      function calcRotate(type, date) {
        const sec = date.getSeconds();
        const minute = date.getMinutes();
        const hour = date.getHours();
        if (type === "hour") {
          return hour * 30 + minute * 0.5;
        } else if (type === "min") {
          return minute * 6 + sec * 0.1;
        } else {
          return sec * 6;
        }
      }
      function changeDomText(date) {
        let str = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
        time.innerHTML = str;
      }
      function updateDate() {
        const now_date = new Date();
        changeDomRotate(clock_hour, calcRotate("hour", now_date));
        changeDomRotate(clock_min, calcRotate("min", now_date));
        changeDomRotate(clock_sec, calcRotate("sec", now_date));
        /* changeDomText(now_date); */
      }
      setInterval(() => {
        updateDate();
      }, 1000);
    </script>
  </body>
</html>
